<template>
  <div>
    <el-form
      :label-position="labelPosition"
      :model="param"
      ref="param"
      label-width="200px"
      class="my_custom_form"
    >
      <template v-if="configdata && configdata.length>0">
        <template v-for="item in configdata">
          <template v-if="!item.hidden">
            <!-- text -->
            <template v-if="item.type == 'text'">
              <el-form-item
                :prop="item.field"
                :rules="item.rules"
                :key="item.field"
                :label="item.title"
                class="el-form-item"
              >
                <template v-if="sourcedata[item.field]">
                  <template v-for="childItem in sourcedata[item.field]">
                    <!-- 遍历找到此值对应的显示内容 -->
                    <template v-if="param[item.field] == childItem[item.value]">
                      <el-input
                        :size="item.size?item.size:''"
                        :key="childItem[item.value]"
                        v-model="childItem[item.key]"
                        :disabled="item.disabled"
                        :readonly="item.readonly"
                      ></el-input>
                    </template>
                  </template>
                </template>
                <template v-else>
                  <el-input
                    :size="item.size?item.size:''"
                    :disabled="item.disabled"
                    :readonly="item.readonly"
                    v-model="param[item.field]"
                  ></el-input>
                </template>
                <div class="tip_div" v-if="item.tip">
                  <p>
                    <span>*</span>
                    <b v-html="item.tip" style="display:inline-block;font-weight: normal;"></b>
                  </p>
                </div>
              </el-form-item>
            </template>

            <!-- textandbtn 本地选择路径的输入框 -->
            <template v-if="item.type == 'textandbtn'">
              <el-form-item
                :prop="item.field"
                :rules="item.rules"
                :key="item.field"
                :label="item.title"
                class="el-form-item"
              >
                <template v-if="sourcedata[item.field]">
                  <el-input
                    :size="item.size?item.size:''"
                    :disabled="item.disabled"
                    :readonly="item.readonly"
                    v-model="param[item.field]"
                  ></el-input>
                  <!-- 点击选择本地文件 -->
                  <template v-if="sourcedata[item.field].btnType == 'chooseLocalFile'">
                    <div class="file_choosereles_box">
                      <FileChooserElesBtn
                        :url="param[item.field]"
                        :dir="sourcedata[item.field].type"
                        :caption="sourcedata[item.field].name"
                        v-on:btnSelectItem="setValToLocalfiletext($event,item.field)"
                      ></FileChooserElesBtn>
                    </div>
                  </template>
                  <!-- 点击打开dialog 需要对应组件 -->
                  <template v-if="sourcedata[item.field].btnType == 'openNewDialog'">
                    <div class="file_choosereles_box">
                      <el-button
                        :size="item.size?item.size:''"
                        type="primary"
                        @click="addNewDialog(sourcedata[item.field].component)"
                      >{{sourcedata[item.field].name}}</el-button>
                    </div>
                  </template>
                  <!-- 点击打开新窗口 需要新窗口页面渲染内容地址 -->
                  <template v-if="sourcedata[item.field].btnType == 'openNewWin'">
                    <div class="file_choosereles_box">
                      <el-button
                        :size="item.size?item.size:''"
                        type="primary"
                        @click="addNewWin(sourcedata[item.field].url)"
                      >{{sourcedata[item.field].name}}</el-button>
                    </div>
                  </template>
                </template>
                <template v-else>
                  <el-input
                    :size="item.size?item.size:''"
                    :disabled="item.disabled"
                    :readonly="item.readonly"
                    v-model="param[item.field]"
                  ></el-input>
                </template>
                <div class="tip_div" v-if="item.tip">
                  <p>
                    <span>*</span>
                    <b v-html="item.tip" style="display:inline-block;font-weight: normal;"></b>
                  </p>
                </div>
              </el-form-item>
            </template>

            <!-- textarea -->
            <template v-if="item.type == 'textarea'">
              <el-form-item
                :prop="item.field"
                :rules="item.rules"
                :key="item.field"
                :label="item.title"
                class="el-form-item"
              >
                <!-- :autosize="{ minRows: 2, maxRows: 4}" -->
                <template>
                  <el-input
                    :size="item.size?item.size:''"
                    type="textarea"
                    :placeholder="item.placeholder"
                    :rows="item.rows ? item.rows : 2"
                    :autosize="item.autosize"
                    v-model="param[item.field]"
                    :disabled="item.disabled"
                    :readonly="item.readonly"
                  ></el-input>
                </template>
                <div class="tip_div" v-if="item.tip">
                  <p>
                    <span>*</span>
                    <b v-html="item.tip" style="display:inline-block;font-weight: normal;"></b>
                  </p>
                </div>
              </el-form-item>
            </template>

            <!-- span -->
            <template v-else-if="item.type == 'span'">
              <el-form-item
                :prop="item.field"
                :rules="item.rules"
                :key="item.field"
                :label="item.title"
                class="el-form-item"
              >
                <template v-if="sourcedata[item.field]">
                  <template v-for="childItem in sourcedata[item.field]">
                    <!-- 遍历找到此值对应的显示内容 -->
                    <template v-if="param[item.field] == childItem[item.value]">
                      <span
                        :key="childItem[item.value]"
                        class="itemtype_span"
                      >{{childItem[item.key]}}</span>
                    </template>
                  </template>
                </template>
                <template v-else>
                  <span class="itemtype_span">{{param[item.field]}}</span>
                </template>
                <div class="tip_div" v-if="item.tip">
                  <p>
                    <span>*</span>
                    <b v-html="item.tip" style="display:inline-block;font-weight: normal;"></b>
                  </p>
                </div>
              </el-form-item>
            </template>

            <!-- link -->
            <template v-else-if="item.type == 'link'">
              <el-form-item
                :prop="item.field"
                :rules="item.rules"
                :key="item.field"
                :label="item.title"
                class="el-form-item"
              >
                <template v-if="sourcedata[item.field]">
                  <template v-for="childItem in sourcedata[item.field]">
                    <!-- 遍历找到此值对应的显示内容 -->
                    <template v-if="param[item.field] == childItem[item.value]">
                      <a
                        :key="childItem[item.value]"
                        :href="''+childItem[item.key]+''"
                        class="itemtype_link"
                        target="_blank"
                      >{{childItem[item.key]}}</a>
                    </template>
                  </template>
                </template>
                <template v-else>
                  <a
                    :href="param[item.field]"
                    class="itemtype_link"
                    target="_blank"
                  >{{param[item.field]}}</a>
                </template>
                <div class="tip_div" v-if="item.tip">
                  <p>
                    <span>*</span>
                    <b v-html="item.tip" style="display:inline-block;font-weight: normal;"></b>
                  </p>
                </div>
              </el-form-item>
            </template>

            <!-- number -->
            <template v-else-if="item.type == 'number'">
              <el-form-item
                :prop="item.field"
                :rules="item.rules"
                :key="item.field"
                :label="item.title"
                class="el-form-item"
              >
                <el-input-number
                  v-model="param[item.field]"
                  :min="item.min"
                  :max="item.max"
                  :controls-position="item.controlsPosition"
                ></el-input-number>
                <div class="tip_div" v-if="item.tip">
                  <p>
                    <span>*</span>
                    <b v-html="item.tip" style="display:inline-block;font-weight: normal;"></b>
                  </p>
                </div>
              </el-form-item>
            </template>

            <!-- datetime -->
            <template v-else-if="item.type == 'datetime'">
              <el-form-item
                :prop="item.field"
                :rules="item.rules"
                :key="item.field"
                :label="item.title"
                class="el-form-item"
              >
                <el-date-picker
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="param[item.field]"
                  :placeholder="item.placeholder?item.placeholder:'选择日期时间'"
                ></el-date-picker>
                <div class="tip_div" v-if="item.tip">
                  <p>
                    <span>*</span>
                    <b v-html="item.tip" style="display:inline-block;font-weight: normal;"></b>
                  </p>
                </div>
              </el-form-item>
            </template>

            <!-- date -->
            <template v-else-if="item.type == 'date'">
              <el-form-item
                :prop="item.field"
                :rules="item.rules"
                :key="item.field"
                :label="item.title"
                class="el-form-item"
              >
                <!-- :picker-options="sourcedata[item.field]?sourcedata[item.field]['pickerOptions']:null" -->
                <el-date-picker
                  type="date"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd"
                  v-model="param[item.field]"
                  :placeholder="item.placeholder?item.placeholder:'选择日期'"
                ></el-date-picker>
                <div class="tip_div" v-if="item.tip">
                  <p>
                    <span>*</span>
                    <b v-html="item.tip" style="display:inline-block;font-weight: normal;"></b>
                  </p>
                </div>
              </el-form-item>
            </template>

            <!-- time -->
            <template v-else-if="item.type == 'time'">
              <el-form-item
                :prop="item.field"
                :rules="item.rules"
                :key="item.field"
                :label="item.title"
                class="el-form-item"
              >
                <el-time-picker
                  format="HH:mm:ss"
                  value-format="HH:mm:ss"
                  v-model="param[item.field]"
                  :picker-options="{selectableRange: item.selectableRange}"
                  :placeholder="item.placeholder?item.placeholder:'选择时间'"
                  :arrow-control="item.arrowControl"
                ></el-time-picker>
                <div class="tip_div" v-if="item.tip">
                  <p>
                    <span>*</span>
                    <b v-html="item.tip" style="display:inline-block;font-weight: normal;"></b>
                  </p>
                </div>
              </el-form-item>
            </template>

            <!-- select -->
            <template
              v-else-if="item.type == 'select' && sourcedata[item.field] && sourcedata[item.field].length>0"
            >
              <el-form-item
                :prop="item.field"
                :rules="item.rules"
                :key="item.field"
                :label="item.title"
                class="el-form-item"
              >
                <el-select v-model="param[item.field]" placeholder="请选择">
                  <template v-for="childItem in sourcedata[item.field]">
                    <el-option
                      :key="childItem[item.value]"
                      :label="childItem[item.key]"
                      :value="childItem[item.value]"
                    ></el-option>
                  </template>
                </el-select>
                <div class="tip_div" v-if="item.tip">
                  <p>
                    <span>*</span>
                    <b v-html="item.tip" style="display:inline-block;font-weight: normal;"></b>
                  </p>
                </div>
              </el-form-item>
            </template>

            <!-- radio -->
            <template
              v-else-if="item.type == 'radio'&& sourcedata[item.field] && sourcedata[item.field].length>0"
            >
              <el-form-item
                :prop="item.field"
                :rules="item.rules"
                :key="item.field"
                :label="item.title"
                class="el-form-item"
              >
                <el-radio-group v-model="param[item.field]">
                  <template v-for="childItem in sourcedata[item.field]">
                    <el-radio
                      :key="childItem[item.value]"
                      :label="childItem[item.value]"
                    >{{childItem[item.key]}}</el-radio>
                  </template>
                </el-radio-group>
                <div class="tip_div" v-if="item.tip">
                  <p>
                    <span>*</span>
                    <b v-html="item.tip" style="display:inline-block;font-weight: normal;"></b>
                  </p>
                </div>
              </el-form-item>
            </template>

            <!-- upload_image -->
            <template v-else-if="item.type == 'upload_image'">
              <el-form-item :key="item.field" :label="item.title" class="el-form-item">
                <TplUpload :fdata="sourcedata[item.field]" @sonToFather="zidingyi($event)"></TplUpload>
                <div class="tip_div" v-if="item.tip">
                  <p>
                    <span>*</span>
                    <b v-html="item.tip" style="display:inline-block;font-weight: normal;"></b>
                  </p>
                </div>
              </el-form-item>
            </template>
          </template>
        </template>
      </template>
    </el-form>
    <!-- custom btns -->
    <template v-if="btns.custom && btns.custom.length>0">
      <template v-for="(item,index) in btns.custom">
        <el-button
          :key="index"
          :type="item.type"
          :icon="item.icon"
          :size="item.size?item.size:''"
          v-if="!item.hidden"
          @click="handleCustomBtn(item)"
        >{{item.name}}</el-button>
      </template>
    </template>
    <template>
      <el-button
        v-if="(btns && btns.cancel && !btns.cancel.hidden) || !btns"
        :size="btns.cancel.size?btns.cancel.size:''"
        @click="changeFdata"
      >{{cancelBtnName}}</el-button>
      <el-button
        v-if="(btns && btns.sure && !btns.sure.hidden)  || !btns"
        :size="btns.sure.size?btns.sure.size:''"
        :loading="btnloading"
        type="primary"
        @click="handlesubmit('param')"
      >{{sureBtnName}}</el-button>
    </template>
    <publicComponent
      :msgConfig="publicComponentObj.msgConfig"
      :confirmConfig="publicComponentObj.confirmConfig"
    ></publicComponent>
    <!-- <el-dialog
      :title="currentDialogTitle"
      :visible.sync="dialogComponentVisible"
      :close-on-click-modal="false"
      :show-close="true"
      width="100%"
      :fullscreen="true"
      class="dialog"
    >
      <div class="el-dialog-div">
        <component :fdata="toChildObj" :is="currentDialogComponent" @sonToFather="zidingyi($event)"></component>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import { isArray, setDataByLocal, getDataByLocal } from '../utils'
import TplUpload from './tpl-upload'
import FileChooserElesBtn from './filechooser-elesbtn'
import { ipcRenderer } from 'electron'
export default {
  name: 'tplForm',
  props: {
    fdata: {
      type: Object
    }
  },
  data () {
    return {
      publicComponentObj: {
        confirmConfig: {},
        msgConfig: {}
      },
      btnloading: false,
      labelPosition: 'left',
      configdata: [],
      sourcedata: {},
      param: {},
      btns: null,
      currentDialogTitle: '',
      dialogComponentVisible: false
    }
  },
  components: { TplUpload, FileChooserElesBtn },
  // watch: {
  //   fdata: {
  //     handler(n, o) {
  //       // console.log("123124");
  //       this.param = { ...n.param };
  //     },
  //     deep: true
  //   }
  //   // fdata(val,oldVal){
  //   //   // console.log(val);
  //   //   console.log(this);
  //   //   this.param = { ...n.param };
  //   // }
  // },
  //  mounted() {
  //   // console.log(this.fdata.param);
  //   this.configdata = this.fdata.configdata;
  //   this.sourcedata = this.fdata.sourcedata;
  //   this.param = { ...this.fdata.param };
  //   this.btns = { ...this.fdata.btns };
  // },
  created () {
    this.configdata = isArray(this.fdata.configdata)
      ? this.fdata.configdata
      : []
    this.sourcedata = this.fdata.sourcedata ? { ...this.fdata.sourcedata } : {}
    this.param = this.fdata.param ? { ...this.fdata.param } : {}
    this.btns = this.fdata.btns ? { ...this.fdata.btns } : null
    // 初始化时 如果是textandbtn类型的 没有param值时 以本地缓存对其赋值
    this.setLocalDefaultValOfAllTextandbtn()
    // console.log(this.configdata, this.sourcedata, this.param);
  },
  computed: {
    // getParam() {
    //   return this.fdata.param;
    // }
    cancelBtnName () {
      if (this.btns && this.btns.cancel && this.btns.cancel.name) {
        return this.btns.cancel.name
      } else return '取 消'
    },
    sureBtnName () {
      if (this.btns && this.btns.sure && this.btns.sure.name) {
        return this.btns.sure.name
      } else return '确 定'
    },
    // 决定当前弹出窗口的组件
    currentDialogComponent () {
      if (this.currentDialogComponentName) {
        this.dialogComponentVisible = true
        console.log(
          '打开的组件页面是',
          `./${this.currentDialogComponentName}.vue`,
          location.href
        )
        return () => import(`./${this.currentDialogComponentName}.vue`)
      } else {
        this.dialogComponentVisible = false
        //  return () => import(`./nofind.vue`);
      }
    }
  },
  methods: {
    // 关闭弹窗
    changeFdata () {
      this.$emit('sonToFather', { closeDialog: true }) // 向父组件通知--关闭弹窗体
    },
    // 表单验证通过之后
    doAfterValidate () {
      this.$emit('sonToFather', { paramObj: this.param })
    },
    // 点击自定义按钮
    handleCustomBtn (btnObj) {
      this.$emit('sonToFather', { customBtnObj: btnObj })
    },
    // 子组件通信父组件
    zidingyi (obj) {
      if (obj) {
        if (obj.imgBase64) {
          this.doWithChildImgBase64(obj.imgBase64)
          // 这里图片对应的key要拿出来对应Base64地址
        }
      }
    },
    // 得到子组件参数后
    doWithChildImgBase64 (imgBase64) {},
    // 初始化时 如果是textandbtn类型的 没有param值时 以本地缓存对其赋值
    setLocalDefaultValOfAllTextandbtn () {
      for (var i = 0; i < this.configdata.length; i++) {
        var item = this.configdata[i]
        if (item.type == 'textandbtn' && !this.param[item.field]) {
          this.param[item.field] = this.getLocalValOfTextandbtn(item.field)
        }
      }
    },
    // textandbtn类型的获取本地路径后 赋值给对应输入框 并存储在本地缓存
    setValToLocalfiletext (url, field) {
      this.param[field] = url
      setDataByLocal('default_' + field, url)
    },
    // 得到textandbtn类型的本地缓存的值
    getLocalValOfTextandbtn (field) {
      return getDataByLocal('default_' + field)
    },
    // 打开新的dialog
    addNewDialog (component) {

    },
    // 打开新的窗口
    addNewWin (url) {
      var ipc = ipcRenderer
      console.log('这里', url)
      ipc.send('open2', url)
    },
    // 表单提交
    handlesubmit (formName) {
      this.btnloading = true
      this.$refs[formName].validate(valid => {
        this.btnloading = false
        if (valid) {
          this.doAfterValidate()
        } else {
          var tempMsgObj = {
            message: '表单验证未完成',
            type: 'warning',
            showClose: true,
            duration: 3000
          }
          this.publicComponentObj.msgConfig = tempMsgObj
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.itemtype_span,
.itemtype_link {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  word-break: break-all;
}
.itemtype_link {
  text-decoration: underline;
}
</style>
<style>
.my_custom_form {
  /* max-height: 60vh; */
  overflow: auto;
  padding-right: 20px;
}
.my_custom_form .el-form-item {
  margin-bottom: 0;
}
.my_custom_form .el-form-item__content {
  line-height: normal;
}
.my_custom_form .el-form-item__content > span {
  line-height: 40px;
}
.my_custom_form
  .el-form-item.is-required:not(.is-no-asterisk)
  .el-form-item__label-wrap
  > .el-form-item__label:before,
.my_custom_form
  .el-form-item.is-required:not(.is-no-asterisk)
  > .el-form-item__label:before {
  content: "";
  color: #f56c6c;
  margin-right: 0;
}
.my_custom_form
  .el-form-item.is-required:not(.is-no-asterisk)
  .el-form-item__label-wrap
  > .el-form-item__label:after,
.my_custom_form
  .el-form-item.is-required:not(.is-no-asterisk)
  > .el-form-item__label:after {
  content: "*";
  color: #f56c6c;
  margin-left: 4px;
}
.my_custom_form .el-input {
  width: 78%;
  display: inline-block;
  vertical-align: top;
}
.my_custom_form .file_choosereles_box {
  width: 20%;
  display: inline-block;
  vertical-align: top;
}
input::-webkit-input-placeholder {
  /* WebKit browsers*/
  color: #9fa9b9;
  font-size: 12px;
  letter-spacing: 0.43px;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18*/
  color: #9fa9b9;
  font-size: 12px;
  letter-spacing: 0.43px;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+*/
  color: #9fa9b9;
  font-size: 12px;
  letter-spacing: 0.43px;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10+*/
  color: #9fa9b9;
  font-size: 12px;
  letter-spacing: 0.43px;
}
input:focus {
  outline: 0;
}
textarea::-webkit-input-placeholder {
  /* WebKit browsers*/
  color: #9fa9b9;
  font-size: 12px;
  letter-spacing: 0.43px;
}
textarea:-moz-placeholder {
  /* Mozilla Firefox 4 to 18*/
  color: #9fa9b9;
  font-size: 12px;
  letter-spacing: 0.43px;
}
textarea::-moz-placeholder {
  /* Mozilla Firefox 19+*/
  color: #9fa9b9;
  font-size: 12px;
  letter-spacing: 0.43px;
}
textarea:-ms-input-placeholder {
  /* Internet Explorer 10+*/
  color: #9fa9b9;
  font-size: 12px;
  letter-spacing: 0.43px;
}
textarea:focus {
  outline: 0;
}
</style>
<style>
.tip_div > p {
  margin-left: 0px;
  line-height: 24px;
  margin-top: 10px;
  color: #9fa9b9;
  font-size: 12px;
}
.tip_div > p > span {
  color: red;
  margin-right: 6px;
}
</style>


